<template>
    <div id="exercise1">
    </div>
</template>

<script setup>
import * as THREE from 'three'
import { onMounted } from 'vue';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

/**
 * 辅助线
 * 鼠标操作
 */


onMounted(()=>{

    /** 1.创建场景对象Scene*/
    var scene = new THREE.Scene();

    /** 2.创建网格模型*/
    var geometry = new THREE.BoxGeometry(20, 20, 20); //创建一个立方体几何对象Geometry
    //材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color:0xff0000,
        opacity:0.7,
        transparent:true
    })
    var mesh = new THREE.Mesh(geometry, material); // 网格模型对象Mesh
    mesh.position.set(200, 200, 200);
    scene.add(mesh); //网格模型添加到场景中

    /** 3.光源设置 */
    var point = new THREE.PointLight(0xffffff); //点光源
    point.position.set(400,200,300); //光源位置
    scene.add(point); //点光源添加到场景中

    var ambient = new THREE.AmbientLight(0x444444); //环境光
    scene.add(ambient)


    // 球体网格模型
    var geometry2 = new THREE.SphereGeometry(10, 40, 40);
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xff00ff,
        opacity:0.7,
        transparent:true
    });
    var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
    scene.add(mesh2);

    // 圆柱网格模型
    var geometry3 = new THREE.CylinderGeometry(10, 10, 20, 25);
    var material3 = new THREE.MeshLambertMaterial({
        color: 0xffff00,
        opacity:0.7,
        transparent:true
    });
    var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
    mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
    scene.add(mesh3);


    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**4.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('exercise1').appendChild(renderer.domElement);

    renderer.render(scene, camera);



    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(250);
    scene.add(axisHelper);

    /**通过定时器，周期旋转 */
    // // 渲染函数
    // function render() {
    //     renderer.render(scene,camera);//执行渲染操作
    //     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    // }
    // // 间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
    // // 渲染频率控制在每秒30~60次，人的视觉效果都很正常
    // setInterval(()=>{
    //     render()
    // },200);

    /**requestAnimationFrame函数，周期旋转 */
    // let T0 = new Date();//上次时间
    // function render() {
    //     let T1 = new Date();//本次时间
    //     let t = T1-T0;//时间差
    //     T0 = T1;//把本次时间赋值给上次时间
    //     mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
    //     renderer.render(scene,camera);//执行渲染操作
    //     requestAnimationFrame(render);
    // }
    // render();

    /**鼠标操作 */
    // function render() {
    //     renderer.render(scene,camera);//执行渲染操作
    // }
    // render();
    // var controls = new OrbitControls(camera, renderer.domElement);//创建控件对象
    // controls.addEventListener('change', render);//监听鼠标、键盘事件

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象
    
    // 注意开发中不要同时使用requestAnimationFrame()或controls.addEventListener('change', render)
    // 调用同一个函数，这样会冲突。

})



</script>

<style lang="scss" scoped>

</style>